<template>
	<view class="">
		<view class="van_top">
			<van-nav-bar title="搜索" fixed left-arrow @click-left="onClickLeft" />
		</view>

		<view class="content" :style="{ paddingTop: (statusBarHeight + 56) + 'px' }">
			<view class="top">
				<view class="inputBox">
					<van-search :value="skeywords" @search="searchFn" @clear="onCancel" @change="e => skeywords = e.detail" shape="round"
						placeholder="请输入搜索关键词" />
				</view>
				<text class="txt" @click="searchFn">搜索</text>
			</view>
			<view class="lishi" v-if="!searchType">
				<view class="title">
					<text class="one">历史搜索</text>
					<view class="two" @click="delSearchList"><van-icon name="delete-o" />删除</view>
				</view>
				<view class="list">
					<view class="item van-ellipsis" v-for="item in searchHistory2" :key="item" @click="searchItem(item)">{{ item }}</view>
				</view>
			</view>
			<!-- <view class="resultList" v-if="searchType"> -->
			<view class="shaixuan" v-if="searchType">
				<text class="xiaoliang" :class="{ active: filter == '0' }" @click="updateFilter('0')">综合</text>
				<text class="xiaoliang" :class="{ active: filter == '3' }" @click="updateFilter('3')">销量</text>
				<view class="xiaoliang" :class="{ active: priceFilter !== '99' }" @click="updateFilter('999')"
					style="display: flex;align-items: center;justify-content: center;">
					<text style="width:50% ;">价格</text>
					<image class="pic" src="../../../static/category/sort0.png" mode="aspectFill" v-if="priceFilter == '99'">
					</image>
					<image class="pic" src="../../../static/category/sort1.png" mode="aspectFill" v-if="priceFilter == '1'">
					</image>
					<image class="pic" src="../../../static/category/sort2.png" mode="aspectFill" v-if="priceFilter == '2'">
					</image>
				</view>
			</view>
			<view class="goodsList" v-if="searchType" :style="{ paddingBottom: (safeAreaBottom + 80) + 'px' }">
				<scroll-view enhanced scroll-y :show-scrollbar="false" class="scroll-Y" @scrolltolower="lower" style="height: 100%;"
					:refresher-triggered="triggered" refresher-enabled @refresherrefresh="refresherrefreshFn">
					<ShopCard v-for="( item, index ) in  goodsList " :key="item.id" :ecCommodityId="item.id" :ecCommodityType="item.type"
						:sellout="item.releaseStock === 0" :style="{ marginBottom: (index == goodsList.length - 1) ? 0 : '16rpx' }"
						@click.native="toDetail(item.id, item.releaseStock)" @refreshPage="refresherrefreshFn" @clickAddBtn="clickAddBtn" :animationStatus="start">
						<template #pic>
							<block>
								<image :src="item.images" mode="aspectFill"></image>
							</block>
						</template>
						<template #title>
							<block>{{ item.name }}</block>
						</template>
						<template #subtitle1>
							<block>{{ item.subTitle }}</block>
						</template>
						<template #subtitle2>
							<block>规格：{{ item.deliveryNorms }}KG</block>
						</template>
						<template #limit v-if="item.limitCount != 0">
							<block>每日限购：{{ item.limitCount }}</block>
						</template>
						<template #price>
							<block>
								<PriceFont color="#FF4F30" bigSize="40rpx" smallSize="28rpx" :price="item.normsPrice" />
							</block>
						</template>
					</ShopCard>
					<uni-load-more :status="loading"></uni-load-more>
				</scroll-view>
			</view>
		</view>
		<view class="bottomFix" v-if="searchType" :style="{ paddingBottom: safeAreaBottom + 'px' }">
			<view class="left">
				<view class="icon_box">
					<view class="pic">
						<image :src="allCount != 0 ? '/static/tabbar/shopcar_active.png' : '/static/tabbar/shopcar.png'" mode="aspectFill" id="car"></image>
						<view class="point" v-if="allCount != 0">{{ allCount }}</view>
					</view>
				</view>
			</view>
			<view class="btn" :class="allCount != 0 ? 'active' : ''" @click="goShopCar">去下单({{ allCount }})</view>
		</view>
		<view class="btncar" :class="start ? 'move':''" :style="{top:curPos.top + 'px',left:curPos.left  + 'px',transform:xMove}">
			<view class="box" :class="start ? 'move':''" :style="{transform:yMove}">
				<van-icon name="shopping-cart-o" size="36rpx" />
			</view>
		</view>
	</view>
</template>

<script>
	let safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom;
	import app from '@/App.vue'
	import { reqSearchNonStandardGoods } from '@/apis/rexiaogoods'
	import { mapGetters } from 'vuex';
	import addCarAniMix from '@/utils/addCarAniMix';
	export default {
		name: 'NoSearchPage',
		mixins:[addCarAniMix],
		data() {
			return {
				statusBarHeight: app.globalData.statusBarHeight,
				safeAreaBottom: safeAreaBottom,
				skeywords: '',
				searchType: false,
				goodsList: [],
				page: {
					pageSize: 15,
					pageNum: 1,
					total: 0
				},
				filter: '0',
				priceFilter: '99',
				loading: 'loading',
				totalNum: 99,
				triggered: false,
			}
		},
		computed: {
			...mapGetters('search', ['searchHistory2']),
			...mapGetters('car', ['allCount']),
		},
		onLoad() {},
		methods: {
			clickAddBtn(e) {
				const query = wx.createSelectorQuery()
				query.select("#car").boundingClientRect((res) => {
					this.targetPos = {top: res.top,left: res.left}
				}).exec();
				if (this.start == true) return;
				// 确定当前点击位置
				this.curPos.left = e.touches[0].clientX - 12;
				this.curPos.top = e.touches[0].clientY - 12;
				setTimeout(() => {
					// 加入动效
					this.start = true;
					// 修改移动目标点
					const offsetX = this.targetPos.left - this.curPos.left;
					const offsetY = this.targetPos.top - this.curPos.top;
					this.xMove = `translateX(${offsetX}px);`
					this.yMove = `translateY(${offsetY}px);`
				}, 100)
				setTimeout(() => {
					this.start = false;
					this.xMove = 'none';
					this.yMove = 'none';
					this.curPos.left = -100;
					this.curPos.top = -100;
				}, 800)
			},
			onClickLeft() {
				uni.navigateBack({
					delta: 1,
				})
			},
			searchItem(item) {
				if (item) {
					this.skeywords = item
				}
				// 调接口
				// 存储搜索记录
				this.$store.dispatch('search/addToHistory', { type: 2, value: this.skeywords });
				this.searchType = true
				this.goodsList = []
				this.page = {
					pageSize: 15,
					pageNum: 1,
					total: 0
				}
				this.filter = '0'
				this.priceFilter = '99'
				this.reqSearchNonStandardGoods()
			},
			searchFn() {
				if (!this.skeywords.trim()) return uni.showToast({ title: '请输入搜索内容', icon: 'none' })
				// 调接口
				// 存储搜索记录total: 0
				// 调接口
				// 存储搜索记录
				this.$store.dispatch('search/addToHistory', { type: 2, value: this.skeywords });
				this.searchType = true
				this.goodsList = []
				this.page = {
					pageSize: 15,
					pageNum: 1,
					total: 0
				}
				this.filter = '0'
				this.priceFilter = '99'
				this.reqSearchNonStandardGoods()
			},
			delSearchList() {
				console.log('sahnchu');
				// 清空搜索记录
				this.$store.dispatch('search/delSearchList', 2);
			},
			updateFilter(type) {
				if (type === '999') {
					if (this.priceFilter == '99') {
						this.priceFilter = '2'
					} else if (this.priceFilter == '1') {
						this.priceFilter = '2'
					} else if (this.priceFilter == '2') {
						this.priceFilter = '1'
					}
					this.filter = this.priceFilter
				} else {
					this.filter = type
					this.priceFilter = '99'
				}
				this.loading = "loading";
				this.page = {
					pageSize: 15,
					pageNum: 1,
					total: 0
				}
				this.goodsList = []
				this.reqSearchNonStandardGoods()
			},
			async reqSearchNonStandardGoods() {
				console.log('this.skeywords', this.skeywords);
				const res = await reqSearchNonStandardGoods({ name: this.skeywords, ...this.page, filter: this.filter })
				if (res.code === 200) {
					const data = res.data;
					this.triggered = false
					// 数组去重
					let arr = [...this.goodsList, ...data.list];
					const map = new Map();
					const newArr = arr.filter(v => !map.has(v.id) && map.set(v.id, v));
					this.goodsList = newArr;
					// this.goodsList = [...this.goodsList, ...res.data.list];
					this.page.total = res.data.total
					if (res.data.isLastPage) {
						this.loading = "noMore"
					}
				}
			},
			lower() {
				if (this.loading == "noMore") {
					return;
				}
				this.page.pageNum++;
				this.loading = "loading";
				this.reqSearchNonStandardGoods();
			},
			refresherrefreshFn() {
				this.page.pageNum = 1
				this.triggered = true
				this.goodsList = []
				this.loading = "loading";
				this.reqSearchNonStandardGoods();
			},
			onCancel() {
				this.searchType = false
			},
			toDetail(id, releaseStock) {
				if (releaseStock == 0) {
					uni.utils.toast("商品已售罄");
					return;
				}
				uni.navigateTo({ url: `/packageA/pages/genericGoodsDetail/genericGoodsDetail?id=${id}` })
			},
			goShopCar() {
				if (this.allCount == 0) return;
				uni.switchTab({ url: '/pages/shopCar/shopCar' })
			}
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .van-search {
		padding: 0 !important;
	}

	::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.content {
		padding-left: 48rpx;
		padding-right: 24rpx;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.top {
			display: flex;
			align-items: center;

			.inputBox {
				width: 598rpx;
				margin-right: 24rpx;
			}

			.txt {
				font-weight: 400;
				font-size: 28rpx;
				color: #FF1642;
			}
		}

		.lishi {
			padding-top: 32rpx;

			.title {
				display: flex;
				justify-content: space-between;
				margin-bottom: 36rpx;

				.one {
					font-size: 28rpx;
					color: #333333;
				}

				.two {
					font-size: 24rpx;
					color: #808080;
				}
			}

			.list {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				.item {
					margin-right: 24rpx;
					max-width: 50%;
					margin-bottom: 24rpx;
					padding: 10rpx 18rpx;
					background: #F6F6F6;
					border-radius: 16rpx;
					font-size: 24rpx;
					color: #333333;
					border-radius: 27rpx 27rpx 27rpx 27rpx;
				}
			}
		}

		// .resultList {
		//   flex: 1;
		//   display: flex;
		//   flex-direction: column;

		.shaixuan {
			height: 88rpx;
			display: flex;
			// background-color: #F5F5F5;
			line-height: 88rpx;
			justify-content: space-between;
			font-weight: 400;
			font-size: 28rpx;
			color: #808080;

			.active {
				font-weight: 600;
				color: #333333;
			}

			.xiaoliang {
				width: 33%;
				text-align: center;
			}

			.pic {
				width: 26rpx;
				height: 26rpx;
				margin: 0 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.goodsList {
			flex: 1;
			overflow: scroll;
			box-sizing: border-box;
			padding-bottom: 100rpx;
		}

		// }
	}

	.bottomFix {
		position: fixed;
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		bottom: 0;
		padding-right: 24rpx;
		align-items: center;

		.left {
			margin-left: 48rpx;

			.icon_box {
				display: inline-block;
				width: 70rpx;
				margin-right: 38rpx;

				.pic {
					margin: 0 auto;
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 14rpx;
					position: relative;

					.point {
						position: absolute;
						top: -5rpx;
						right: -5rpx;
						font-weight: 500;
						font-size: 16rpx;
						color: #FFFFFF;
						width: 20rpx;
						height: 20rpx;
						background-color: #FF3030;
						border-radius: 50%;
						text-align: center;
						line-height: 20rpx;
					}

					image {
						width: 100%;
						height: 100%;
					}
				}

				.txt {
					width: 100%;
					font-weight: 400;
					font-size: 20rpx;
					color: #333333;
					text-align: center;
				}
			}
		}

		.btn {
			margin-right: 24rpx;
			width: 434rpx;
			height: 76rpx;
			background: #FF1642;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 76rpx;
			text-align: center;

			&.red {
				color: #FF1642;
				border: 2rpx solid #FF1642;
			}
		}
	}

	.btncar {
		position: fixed;
		z-index: 2000;
		width: 48rpx;
		height: 48rpx;
		color: #fff;
		transition-timing-function: linear;

		.box {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background-color: #FF1642;
			transition-timing-function: cubic-bezier(0.5, -1, 1, 1)
		}
	}

	.move {
		transition: all 0.6s;
	}
</style>